<template>
  <el-drawer
    v-model="visible"
    :title="title"
    :size="size"
    :direction="direction"
    :before-close="handleBeforeClose"
    :show-close="false"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :append-to-body="true"
    :destroy-on-close="destroyOnClose"
    @open="emit('open')"
    @close="emit('close')"
    @opened="emit('opened')"
    @closed="emit('closed')"
  >
    <template #header="{ close, titleId, titleClass }">
      <slot name="header" :close="close" :title-id="titleId" :title-class="titleClass">
        <div class="drawer-header-container" :class="getHeaderClass(title)">
          <div class="drawer-header-content">
            <div class="drawer-header-icon">
              <el-icon :size="16">
                <component :is="getHeaderIcon(title)" />
              </el-icon>
            </div>
            <span :id="titleId" :class="titleClass" class="drawer-header-title">{{ title }}</span>
          </div>
          <el-icon class="drawer-close" @click="handleBeforeClose(close)"><Close /></el-icon>
        </div>
      </slot>
    </template>

    <div class="global-drawer-content drawer-content-wrapper">
      <slot></slot>
    </div>

    <template #footer>
      <slot name="footer">
        <div class="global-drawer-footer">
          <template v-if="showFooterButtons && !title.includes('详情') && !title.includes('查看')">
            <el-button @click="closeDrawer">取消</el-button>
            <el-button type="primary" @click="confirm" :class="getButtonClass(title)">
              确定
            </el-button>
          </template>
          <template v-else>
            <el-button type="primary" @click="closeDrawer">关闭</el-button>
          </template>
        </div>
      </slot>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
  import { ref, computed, watch } from 'vue'
  import { ElDrawer, ElButton, ElIcon } from 'element-plus'
  // 导入常用图标
  import {
    User,
    Plus,
    Edit,
    View,
    Delete,
    Document,
    Folder,
    DataLine,
    Management,
    SetUp,
    Tickets,
    Avatar,
    Reading,
    Postcard,
    Close,
  } from '@element-plus/icons-vue'

  interface Props {
    modelValue: boolean
    title?: string
    size?: string
    direction?: 'ltr' | 'rtl' | 'ttb' | 'btt'
    beforeClose?: () => Promise<boolean> | boolean
    showClose?: boolean
    closeOnClickModal?: boolean
    closeOnPressEscape?: boolean
    showFooterButtons?: boolean
    destroyOnClose?: boolean
  }

  interface Emits {
    (e: 'update:modelValue', value: boolean): void
    (e: 'open'): void
    (e: 'close'): void
    (e: 'opened'): void
    (e: 'closed'): void
    (e: 'confirm'): void
  }

  const props = withDefaults(defineProps<Props>(), {
    title: '',
    size: '50%',
    direction: 'rtl',
    showClose: true,
    closeOnClickModal: true,
    closeOnPressEscape: true,
    showFooterButtons: true,
    destroyOnClose: false,
  })

  const emit = defineEmits<Emits>()

  const visible = computed({
    get: () => props.modelValue,
    set: value => emit('update:modelValue', value),
  })

  const handleBeforeClose = async (done: () => void) => {
    if (props.beforeClose) {
      const result = await props.beforeClose()
      if (result) {
        done()
      }
    } else {
      done()
    }
  }

  const closeDrawer = () => {
    visible.value = false
    return true
  }

  const confirm = () => {
    emit('confirm')
  }

  // 根据标题内容返回相应的图标
  const getHeaderIcon = (title: string = '') => {
    if (title.includes('新增') || title.includes('添加') || title.includes('创建')) {
      return Plus
    } else if (title.includes('编辑') || title.includes('修改')) {
      return Edit
    } else if (title.includes('详情') || title.includes('查看')) {
      return View
    } else if (title.includes('删除')) {
      return Delete
    } else if (title.includes('客户')) {
      return User
    } else if (title.includes('合同')) {
      return Document
    } else if (title.includes('案件')) {
      return Tickets
    } else if (title.includes('设置') || title.includes('配置')) {
      return SetUp
    } else if (title.includes('管理')) {
      return Management
    } else if (title.includes('数据') || title.includes('统计')) {
      return DataLine
    } else if (title.includes('档案') || title.includes('资料')) {
      return Postcard
    } else {
      return Folder
    }
  }

  // 根据标题内容返回相应的标题栏样式类
  const getHeaderClass = (title: string = '') => {
    if (title.includes('新增') || title.includes('添加') || title.includes('创建')) {
      return 'drawer-header-add'
    } else if (title.includes('编辑') || title.includes('修改')) {
      return 'drawer-header-edit'
    } else if (title.includes('详情') || title.includes('查看')) {
      return 'drawer-header-view'
    } else if (title.includes('删除')) {
      return 'drawer-header-delete'
    } else {
      return 'drawer-header-default'
    }
  }

  // 根据标题内容返回相应的按钮样式类
  const getButtonClass = (title: string = '') => {
    if (title.includes('新增') || title.includes('添加') || title.includes('创建')) {
      return 'btn-add'
    } else if (title.includes('编辑') || title.includes('修改')) {
      return 'btn-edit'
    } else if (title.includes('详情') || title.includes('查看')) {
      return 'btn-view'
    } else if (title.includes('删除')) {
      return 'btn-delete'
    } else {
      return ''
    }
  }

  // 监听外部值变化
  watch(
    () => props.modelValue,
    newValue => {
      // 移除直接修改visible.value的代码，避免循环更新
    },
    { immediate: true }
  )
</script>

<style scoped>
  /* 基础抽屉容器样式 */
  :deep(.el-drawer__body) {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* 标题栏样式 - 合并LawyerListView中的样式规范 */
  .drawer-header-container {
    height: 50px; /* 与LawyerListView保持一致 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); /* 与LawyerListView保持一致 */
    margin-bottom: 0; /* 移除负边距，与LawyerListView保持一致 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* 不同状态的标题栏背景色 - 合并LawyerListView中的渐变色 */
  .drawer-header-add {
    background: linear-gradient(to right, #67c23a, #85ce61, #9adb75);
  }

  .drawer-header-view {
    background: linear-gradient(to right, #409eff, #66b1ff, #8cc5ff);
  }

  .drawer-header-edit {
    background: linear-gradient(to right, #e6a23c, #ebb563, #f0c78a);
  }

  .drawer-header-delete {
    background: linear-gradient(to right, #f56c6c, #f89898, #fbc4c4);
  }

  .drawer-header-default {
    background: linear-gradient(to right, #909399, #c8c9cc, #dcdfe6);
  }

  /* 标题栏内容样式 */
  .drawer-header-content {
    display: flex;
    align-items: center;
    color: white;
    flex: 1;
  }

  .drawer-header-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    margin-right: 8px;
    color: white;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .drawer-header-title {
    font-size: 16px; /* 与LawyerListView保持一致 */
    font-weight: 500; /* 与LawyerListView保持一致 */
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* 关闭按钮样式 */
  .drawer-close {
    cursor: pointer;
    font-size: 20px;
    color: white;
  }

  /* 内容区域样式 */
  .global-drawer-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
  }

  /* 底部按钮区域样式 */
  .global-drawer-footer {
    padding: 10px 20px;
    border-top: 1px solid #e4e7ed;
    background: #f5f7fa;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }

  /* 按钮样式 */
  .btn-add {
    background-color: #67c23a !important;
    border-color: #67c23a !important;
    color: #ffffff !important;
  }

  .btn-view {
    background-color: #409eff !important;
    border-color: #409eff !important;
    color: #ffffff !important;
  }

  .btn-edit {
    background-color: #e6a23c !important;
    border-color: #e6a23c !important;
    color: #ffffff !important;
  }

  .btn-delete {
    background-color: #f56c6c !important;
    border-color: #f56c6c !important;
    color: #ffffff !important;
  }
</style>
